<template>
  <view>
    <view class="block-view">
      <goods-info :goodsName="comments.goods_name" :goodsImg="comments.goods_img"></goods-info>
    </view>
    <view class="goods-comments">
      <view class="comments-info">
        <view class="u-flex u-row-between">
          <view class="u-flex">
            <view class="u-m-r-26">
              <u-image width="70" height="70" shape="circle" :src="comments.member_face"></u-image>
            </view>
            <view>{{ comments.member_name }}</view>
          </view>
          <view class="time-info">{{ comments.create_time | date('yyyy-mm-dd hh:MM:ss') }}</view>
        </view>
        <view class="grade-info">
          <view>{{ comments.grade | filterGrade }}</view>
          <!-- <u-icon class="u-m-r-4 u-font-10" name="star-fill" color="#f42424" v-for="(star, starIndex) in comments.grade" :key="starIndex"></u-icon> -->
        </view>
        <view class="u-p-l-35 u-p-r-35">
          <view class="u-m-b-20 u-line-5">{{ comments.content }}</view>
          <view class="u-flex u-flex-wrap" v-if="comments.images">
            <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comments.images" :key="imgIndex">
              <u-image width="200" height="200" :src="img"
                       @click="handlePreviewImage(comments.images, imgIndex)"></u-image>
            </view>
          </view>
        </view>
        <view class="reply-info" v-if="comments.reply_status === 1 && comments.reply">
          <view class="reply-line u-rela">
            <text class="reply-line-txt u-abso"></text>
          </view>
          <view class="u-p-t-20">
            <text>商家回复：</text>
            <view class="u-line-5">{{ comments.reply.content }}</view>
          </view>
        </view>
        <!-- 追评 -->
        <view v-if="comments.additional_comment && comments.additional_comment.audit_status === 'PASS_AUDIT'">
          <view class="u-flex u-row-between u-margin-left-30">
            <view class="add-title">追评信息</view>
            <view class="time-info">{{ comments.additional_comment.create_time | date('yyyy-mm-dd hh:MM:ss') }}</view>
          </view>
          <view class="u-m-l-35 u-p-r-35">
            <view class="u-m-b-20 u-line-5">{{ comments.additional_comment.content }}</view>
            <view class="u-flex u-flex-wrap" v-if="comments.additional_comment.images">
              <view
                class="comment-img u-m-r-15 u-m-b-15"
                v-for="(img, imgIndex) in comments.additional_comment.images"
                :key="imgIndex"
              >
                <u-image
                  width="200"
                  height="200"
                  :src="img"
                  @click="handlePreviewImage(comments.additional_comment.images, imgIndex)"
                ></u-image>
              </view>
            </view>
          </view>
          <view class="reply-info" v-if="comments.additional_comment.reply_status === 1 && comments.additional_comment.reply">
            <view class="reply-line u-rela">
              <text class="reply-line-txt u-abso"></text>
            </view>
            <view class="u-p-t-20">
              <text>商家回复：</text>
              <view class="u-line-5">{{ comments.additional_comment.reply.content }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 店铺评分 -->
    <view v-if="comments.member_shop_score" class="shop-info">
      <view class=shop-score>店铺评分</view>
      <view class="shop-score-box">
        <view class="u-flex">
          <view class="score-text">描述相符</view>
          <view class="grade-info">
            <u-rate
              v-model="comments.member_shop_score.description_score"
              :disabled="true"
              inactive-color="#ff5000"
            ></u-rate>
          </view>
          <view>{{ countGradeText(comments.member_shop_score.description_score) }}</view>
        </view>
        <view class="u-flex">
          <view class="score-text">服务态度</view>
          <view class="grade-info">
            <u-rate
              v-model="comments.member_shop_score.service_score"
              :disabled="true"
              inactive-color="#ff5000"
            ></u-rate>
          </view>
          <view>{{ countGradeText(comments.member_shop_score.service_score) }}</view>
        </view>
        <view class="u-flex">
          <view class="score-text">物流服务</view>
          <view class="grade-info">
            <u-rate
              v-model="comments.member_shop_score.delivery_score"
              :disabled="true"
              inactive-color="#ff5000"
            ></u-rate>
          </view>
          <view>{{ countGradeText(comments.member_shop_score.delivery_score) }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as API_Member from '@/api/members.js'

export default {
  data() {
    return {
      params: {
        comment_id: '',
      },
      comments: {},
    }
  },
  onLoad(options) {
    this.params.comment_id = options.comment_id
    this.loadData()
  },
  filters: {
    /** 评分 */
    filterGrade(val) {
      switch (val) {
        case 'bad':
          return '差评'
        case 'neutral':
          return '中评'
        default:
          return '好评'
      }
    }
  },
  methods: {
    countGradeText(val) {
      switch (val) {
        case 5:
          return '非常好'
        case 4:
          return '好'
        case 3:
          return '一般'
        case 2:
          return '差'
        case 1:
          return '非常差'
        default:
          return '非常好'
      }
    },
    //加载数据
    loadData() {
      API_Member.getCommentsDetail(this.params.comment_id).then(res => {
        console.log(res)
        this.comments = res
      })
    },
    //图片预览
    handlePreviewImage(image, index) {
      uni.previewImage({
        current: index,
        urls: image
      })
    },
  }
}
</script>

<style lang="scss">
    .block-view {
        background-color: #FFFFFF;
        padding: 5rpx 30rpx;
    }
    .block-title {
        background-color: #f3f4f6;
        padding: 10rpx 30rpx;
        font-weight: 600;
    }
    .goods-comments {
        .comments-info {
            background-color: #FFFFFF;
            border-radius: 20rpx;
            padding: 20rpx;
            margin: 20rpx 0;
            .comment-img {
                border-radius: 10rpx;
                overflow: hidden;
            }
            .grade-info {
                margin: 10rpx 30rpx;
            }
        }
        .time-info, .reply-info {
            color: #999999;
            font-size: 24rpx;
            padding: 20rpx 30rpx;
            .reply-line {
                height: 2rpx;
                border-top: 2rpx solid #F7F7F7;
                .reply-line-txt {
                    top: -24rpx;
                    border: 12rpx solid;
                    border-color: transparent transparent #F7F7F7;
                }
            }
        }
        .add-title {
            font-size: 31rpx;
            font-weight: 600;
        }
    }
    .shop-info {
       background-color: #FFFFFF;
       border-radius: 20rpx;
       padding: 20rpx;
       margin: 20rpx 0;
       .u-flex {
           padding: 15rpx 0;
       }
       .shop-score {
           font-size: 32rpx;
           font-weight: bold;
           padding-bottom: 10rpx;
       }
       .grade-info {
           padding: 0 20rpx;
       }
    }
</style>
